<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: absolute;
            left: 0;
            top: 0;
        }


        p{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: absolute;
            left: 0;
            top: 350px;
        }
    </style>
</head>
<body>
    <div></div>


    <p></p>
    <script>

        // 减速运动 每次小数点 越来越多 到达不了目标 
        // 如何解决  
        // 取整 
        // 向上取整   向下取整  


        // 向上取整   
        //   负方向运动  运动距离  -0.9   0  
        //    向下取整   -1 

        // 正方向运动  向上取整  
        // 负方向运动  向下取整   
        function move(ele,type,target,timer){
           
        
           const t = setInterval(function(){
               //初始值 
               let init = parseInt(window.getComputedStyle(ele)[type]);
               // 本次运动的距离 
               let duration =  (target-init) / 10 ;
             

               duration = duration>0?Math.ceil(duration):Math.floor(duration)
               console.log(duration);
               if(init === target){
               // 停下来 
                   clearInterval(t);
               }else{
                 ele.style[type] = init+duration + 'px';
               }

           },timer);
       }

       var divele = document.querySelector('div');
       divele.onclick = function(){
           move(divele,'left',496,10)
       }


       var pele = document.querySelector('p');
       pele.onclick = function(){
           move(pele,'height',496,20)
       }
    </script>
</body>
</html>